<div class="page-breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="fa fa-home"></i>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">日志管理</a>
        </li>
        <li class="active">请求记录</li>
    </ul>
</div>
<!-- Page Body -->
<div class="page-body">
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <div class="widget">
                <div class="widget-header bordered-bottom bordered-themeprimary">
                    <i class="widget-icon fa fa-tasks themeprimary"></i>
                    <span class="widget-caption themeprimary">过滤条件</span>
                </div>
                <div class="widget-body">
                    <div class="form-inline" role="form">
                        <div class="form-group">
                            <label class="sr-only" for="requestUrl">Email address</label>
                            <input type="text" class="form-control" id="requestUrl" placeholder="请求地址">
                        </div>
                        <button type="submit" class="btn btn-default" id="search">检索</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div class="widget">
                <div class="widget-header bordered-bottom bordered-themeprimary">
                    <i class="widget-icon fa fa-tasks themeprimary"></i>
                    <span class="widget-caption themeprimary">日志列表</span>
                </div>
                <div class="widget-body">
                    <table id="dt_basic" class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th></th>
                            <th data-hide="phone">编号</th>
                            <th data-class="expand">名称</th>
                            <th data-hide="phone,tablet">类型</th>
                            <th data-hide="phone,tablet">请求时间</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="application/javascript">

    $(function(){
        var oTable = $('#dt_basic').dataTable({
            serverSide: true,
            orderMulti: false,
            "sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
            "oTableTools": {
                "aButtons": []
            },
            "language": {
                "search": "",
                'emptyTable': '没有数据',
                'loadingRecords': '加载中...',
                'processing': '查询中...',
                'sLengthMenu': '每页 _MENU_ 件',
                'zeroRecords': '没有数据',
                "oPaginate": {
                    "sPrevious": "上一页",
                    "sNext": "下一页"
                },
                //'info': '当前显示 _START_ 到 _END_ 条记录,共 _TOTAL_ 条记录,共 _PAGES_页,当前第_PAGE_ 页',
                'info': '当前显示 _START_ 到 _END_ 条记录,共 _TOTAL_ 条记录',
                'infoEmpty': '没有数据',
                'infoFiltered': '(过滤总件数 _MAX_ 条)'
            },
            columns: [
                { "data": "id" , "bSortable": false, "aTargets": [0]},
                { "data": "id" },
                { "data": "title" },
                { "data": "requestMethod" },
                { "data": "createTime",
                    "render":function(data, type, full, meta){
                        return TimeUtil.yyyyMMddHHmmss(data);
                    }
                }
            ],
            iDisplayLength:10,
            lengthMenu: [10,50, 100, 500,1000],
            ajax: function (data, callback, settings) {
                var param = {};
                param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
                param.start = data.start;//开始的记录序号
                param.page = (data.start / data.length) + 1;//当前页码
                param.requestUrl=$('#requestUrl').val();
                $.ajax({
                    type: "GET",
                    url: "rest/v1/log/req/"+param.page+"/"+param.limit+"?startTime=1&requestLog=GET",
                    cache: false, //禁用缓存
                    data: param, //传入组装的参数
                    dataType: "json",
                    success: function (content) {
                        var result = content.result;
                        if(null != content.result){
                            var returnData = {};
                            returnData.draw=result.content;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.totalSize;//返回数据全部记录
                            returnData.recordsFiltered = result.totalSize;//后台不实现过滤功能，每次查询均视作全部结果
                            returnData.data = result.content;//返回的数据列表
                            callback(returnData);
                        }
                    }
                });
            },
            "fnCreatedRow": function(nRow, aData, iDataIndex) {
                return $('td:eq(0)', nRow).html('<i class="fa fa-plus-square-o row-details"></i>');
            }
        });

        $('#dt_basic').on('click', ' tbody td .row-details', function () {
            var nTr = $(this).parents('tr')[0];
            if (oTable.fnIsOpen(nTr)) {
                $(this).addClass("fa-plus-square-o").removeClass("fa-minus-square-o");
                oTable.fnClose(nTr);
            }else {
                $(this).addClass("fa-minus-square-o").removeClass("fa-plus-square-o");;
                oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
            }
        });

        $('#search').click(function(e){
            oTable.fnReloadAjax();
        });

    });



    function fnFormatDetails(oTable, nTr) {
        var aData = oTable.fnGetData(nTr);
        var sOut = '<table style="margin:0px;padding:0px;">';
        sOut +='		<tr><td>客户端IP地址:</td><td>'+aData.remoteIpAddress+'</td></tr> ';
        sOut +='		<tr><td>请求方式:</td><td>'+aData.requestMethod+'</td></tr> ';
        sOut +='		<tr><td>请求地址:</td><td>'+aData.requestUrl+'</td></tr> ';
        sOut +='		<tr><td>请求参数:</td><td>'+aData.requestParameter+'</td> </tr>';
        sOut +='		<tr><td>请求时间:</td><td>'+TimeUtil.yyyyMMddHHmmss(aData.createTime)+'</td></tr> ';
        sOut +='		<tr><td>描述:</td><td>'+aData.content+'</td></tr> ';
        sOut +='</table> ';
        return sOut;
    }
</script>
